Webpack-Bundle-Analyzer

非常實用的視覺化打包分析工具，打包模組視覺化後，可以一目了然目前打包了那些模組、哪個模組體積過大或是重複打包，專案優化必備工具。

先安裝 Plugin

npm i webpack-bundle-analyzer -D

設定檔調整如下

webpack.common.js

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

這樣就能正常使用囉，只要執行打包成功後，就會將打包分析結果顯示在 8888 port ( default )。

詳細使用方式請看這裡

Speed-Measure-Plugin

透過這個套件，我們可以清楚的看到，打包整體時間、各 Plugin、Loader 處理時間分別為何，以利我們針對打包速度去做優化。



先安裝 Plugin

npm i speed-measure-webpack-plugin -D

設定檔調整如下

webpack.common.js

var SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
var smp = new SpeedMeasurePlugin()
module.exports = smp.wrap({
  ...
})

這樣每次打包就能夠查看每個 Plugin、Loader 耗用了多少時間



詳細使用方式請看這裡

analyse

先使用 Webpack 打包指令生成 Webpack stats 分析文件

webpack --profile --json > stats.json

然後到官方提供的這個網頁上傳 stats.json

Webpack analyse

就可以透過一些視覺化資料來分析打包結果

[詳細使用方式請看這裡](http://webpack.github.io/analys